<template>
	<view>
		<view class="clock-card">
			<view class="clock-content-line">
				<view class="content-line" :style="'background:'+data.line_color[0]">
		
				</view>
			</view>
			<view class="clock-right">
				<view class="header-label">
					<u-tag size="mini" :color="data.line_color[0]" :bg-color="data.line_color[1]" :border-color="data.line_color[1]" :text="data.lable" />
				</view>
				<view class="clock-content">
					<view class="clock-content-text">
						<view class="clock-title">
							<text>{{data.planName}}</text>
		
						</view>
						<view class="clock-info">
							{{data.planDescription}}
						</view>
						<block v-if="isShowTime">
							<view class="clock-time">
								<text>每天开始时间：</text>
								<u-tag size="mini" :bg-color="data.line_color[1]" :color="data.line_color[0]" :border-color="data.line_color[1]" text="8:00"
									shape="circle" />
							</view>
							<view class="clock-time">
								<text>每天结束时间：</text>
								<u-tag size="mini" :bg-color="data.line_color[1]" :color="data.line_color[0]" :border-color="data.line_color[1]" text="10:00"
									shape="circle" />
							</view>
						</block>
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		name:"plan-today-card",
		data() {
			return {
				
			};
		},
		props:['data','isShowTime']
	}
</script>

<style lang="scss">
.clock-card {
		
		padding: 14rpx;
		background: #ffffff;
		border-radius: 33rpx;
		box-shadow: 4rpx 4rpx 16rpx 0rpx rgba(0, 6, 140, 0.25);
		display: flex;
		position: relative;

		.clock-content-line {
			width: 42rpx;
			height: 85%;
			position: absolute;
			left: 4rpx;
			display: flex;
			align-items: center;
			justify-content: start;

			.content-line {
				width: 5rpx;
				height: 60%;
				background: #6d39e9;
				border-radius: 185rpx;
				margin-left: 18rpx;
			}
		}

		.clock-right {
			margin-left: 42rpx;
			padding-bottom: 25rpx;
		}

		.clock-info {
			font-size: 26rpx;
			font-weight: 500;
			text-align: LEFT;
			color: rgba(0, 0, 0, 0.60);
		}

		.clock-time {
			font-size: 24rpx;
			font-weight: 400;
			text-align: LEFT;
			color: rgba(0, 0, 0, 0.60);
			margin: 10rpx 0;
		}

	}
</style>
